<template>
  <!-- 物品列表组件 -->
  <div class="eqps">
    <!-- 面包屑路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>世界管理</el-breadcrumb-item>
      <el-breadcrumb-item>装备管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-tabs type="border-card">
        <el-tab-pane label="全部装备">
          <el-row>
            <el-col :span="8">
              <div class="grid-content search-container">
                <el-input
                  placeholder="请输入内容"
                  v-model.trim="searchCont"
                  clearable
                  class="search-input"
                  @clear="searchClear"
                >
                </el-input>
                <el-button
                  type="info"
                  plain
                  icon="el-icon-search"
                  @click="getEqpList"
                ></el-button>
              </div>
            </el-col>
          </el-row>
          <el-table :data="eqpList" border stripe style="width: 100%">
            <!-- <el-table-column type="index" label="#" width="48"></el-table-column> -->
            <el-table-column
              prop="eqp_id"
              label="编号"
              width="80"
            ></el-table-column>
            <el-table-column label="图标" align="center">
              <template slot-scope="props">
                <div v-if="props.row.eqp_icon">
                  <el-image :src="path + props.row.eqp_icon">
                    <span slot="error">
                      <el-image
                        :src="
                          path +
                            props.row.eqp_icon.replace(
                              `/${props.row.eqp_id}.img`,
                              `/${props.row.eqp_id}.img/${props.row.eqp_id}.img`
                            )
                        "
                      >
                      <span slot="error">无图标</span>
                      </el-image>
                    </span>
                  </el-image>
                </div>
                <div v-else>
                  无
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="eqp_name" label="名称" width="100">
            </el-table-column>
            <el-table-column
              prop="eqp_desc"
              label="描述"
              width="200"
            ></el-table-column>
            <el-table-column prop="eqp_cat" label="分类">
              <template slot-scope="props">
                <el-tag v-if="props.row.eqp_cat == 'Accessory'" size="mini"
                  >装饰</el-tag
                >
                <el-tag
                  type="success"
                  v-if="props.row.eqp_cat == 'Cap'"
                  size="mini"
                  >帽子</el-tag
                >
                <el-tag
                  type="info"
                  v-if="props.row.eqp_cat == 'Cape'"
                  size="mini"
                  >披风</el-tag
                >
                <el-tag
                  type="warning"
                  v-if="props.row.eqp_cat == 'Coat'"
                  size="mini"
                  >上衣</el-tag
                >
                <el-tag v-if="props.row.eqp_cat == 'Glove'" size="mini"
                  >手套</el-tag
                >
                <el-tag v-if="props.row.eqp_cat == 'Longcoat'" size="mini"
                  >套服</el-tag
                >
                <el-tag v-if="props.row.eqp_cat == 'Pants'" size="mini"
                  >裤子</el-tag
                >
                <el-tag v-if="props.row.eqp_cat == 'PetEquip'" size="mini"
                  >宠物装备</el-tag
                >
                <el-tag v-if="props.row.eqp_cat == 'Ring'" size="mini"
                  >戒指</el-tag
                >
                <el-tag v-if="props.row.eqp_cat == 'Shield'" size="mini"
                  >副手</el-tag
                >
                <el-tag v-if="props.row.eqp_cat == 'Shoes'" size="mini"
                  >鞋子</el-tag
                >
                <el-tag v-if="props.row.eqp_cat == 'TamingMob'" size="mini"
                  >坐骑</el-tag
                >
                <el-tag v-if="props.row.eqp_cat == 'Weapon'" size="mini"
                  >武器</el-tag
                >
              </template>
            </el-table-column>
            <!-- <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="reqLevel" label="需求等级"></el-table-column>
            <el-table-column prop="maxDays" label="有效期"></el-table-column> -->
            <el-table-column prop="only" label="唯一性">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.only"
                  @change="changeOnlyStatus(props.row.eqp_id)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="tradeBlock" label="可否交易">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.tradeBlock"
                  @change="changeTradeStatus(props.row.eqp_id)"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="120">
              <template slot-scope="props">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editEqp(props.row.eqp_id)"
                ></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteEqp(props.row.eqp_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageConfig.currentPage"
              :page-sizes="pageConfig.pageSizes"
              :page-size="pageConfig.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageConfig.pageTotal"
              :hide-on-single-page="false"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 搜索内容
      searchCont: '',
      // 当前分类
      eqp_cat: '',
      // 怪物列表数据
      eqpList: [],
      // 资源路径
      path: '',
      // 分页器参数配置
      pageConfig: {
        pageTotal: 0, // 分页器总条数
        pageSize: 10, // 每页显示条数
        pageSizes: [10, 15, 20, 25], // 可选择的每页条数
        currentPage: 1 // 分页器当前页码
      }
    };
  },
  methods: {
    getEqpList () {
      // 获取物品列表
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      this.$axios
        .get('/eqpList', {
          params: {
            eqp_cat: this.eqp_cat,
            search: this.searchCont.trim(),
            pagenum: this.pageConfig.currentPage,
            pagesize: this.pageConfig.pageSize
          }
        })
        .then(res => {
          if (res.status === 0) {
            // 处理数据
            res.data.forEach(eqp => {
              eqp.only = eqp.only === 1;
              eqp.tradeBlock = eqp.tradeBlock === 0;
            });
            // 设置分页
            this.pageConfig.pageTotal = res.total;
            this.pageConfig.currentPage = res.pagenum;
            // 设置数据
            this.eqpList = res.data;
            this.path = res.path;
            // 判断当前页是否为空
            if (
              this.pageConfig.pageTotal ===
              (this.pageConfig.currentPage - 1) * this.pageConfig.pagesize
            ) {
              if (this.pageConfig.currentPage - 1 < 1) {
                this.handleCurrentChange(1);
              } else {
                this.handleCurrentChange(this.pageConfig.currentPage - 1);
              }
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    changeOnlyStatus (id) {
      // 切换是否唯一性
    },
    changeTradeStatus (id) {
      // 切换是否可交易
    },
    editEqp (id) {
      // 编辑物品
    },
    deleteEqp (id) {
      // 删除物品
    },
    handleSizeChange (val) {
      // 切换每页条数重新获取数据
      this.pageConfig.pageSize = val;
      this.getEqpList();
    },
    handleCurrentChange (val) {
      // 切换页码时重新获取数据
      this.pageConfig.currentPage = val;
      this.getEqpList();
    },
    searchClear () {
      this.getEqpList();
    }
  },
  mounted () {
    this.getEqpList();
  }
};
</script>

<style></style>
